<template>
  <div class="my">
    <!-- 顶部 标头 -->
    <div class="header">
      <div class="header_my">我的</div>
      <div class="header_portrait">
        <div class="header_portrait_img">
          <img v-if="!pic"
               class="img"
               src="@/assets/xiongmao.jpg"
               alt="" />
          <img v-else
               class="img"
               :src="pic"
               alt="" />
        </div>
        <div v-if="!userLogin"
             class="header_portrait_login"
             @click="$router.push('/RapidEnrollment')">点击登录</div>
        <div v-else
             class="header_portrait_login"
             @click="HandoverLogin">{{ userLogin.nicheng }}</div>
      </div>
    </div>
    <!-- 中部 -->
    <div class="box">
      <div class="box_muet">
        <div class="box_muet_ciadan">
          <van-grid :column-num="4"
                    clickable>
            <van-grid-item to="/UserInformation">
              <i icon="icon"
                 class="jiazheng icon-caidan-"></i>
              <span class="text">个人资料</span>
            </van-grid-item>
            <van-grid-item to="/AttentionPersonnel">
              <i icon="icon"
                 class="jiazheng icon-wode"></i>
              <span class="text">我的关注</span>
            </van-grid-item>
            <van-grid-item to="/DomesticRecord">
              <i icon="icon"
                 class="jiazheng icon-mianxingxinxi"></i>
              <span class="text">我的消息</span>
            </van-grid-item>
            <van-grid-item to="/relation">
              <i icon="icon"
                 class="jiazheng icon-weibiaoti2"></i>
              <span class="text">已联系家政</span>
            </van-grid-item>
          </van-grid>
        </div>
        <div class="mint">
          <van-row>
            <van-col>
              <van-cell title="城市家政服务标准"
                        is-link
                        size="lager"
                        @click="$router.push('/domesticservice')">
                <i slot="icon"
                   class="jiazheng icon-icon_receipt"></i>
              </van-cell>
              <van-cell title="家政求职记录"
                        is-link
                        @click="$router.push('/employment')">
                <i slot="icon"
                   class="jiazheng icon-caidan-"></i>
              </van-cell>
            </van-col>
          </van-row>

          <van-row class="row_two">
            <van-col>
              <van-cell @click="authenticationShow = true"
                        title="身份认证通道"
                        is-link>
                <i slot="icon"
                   class="jiazheng icon-anquan1"></i>
              </van-cell>
              <van-cell title="关于我们"
                        to="/aboutus"
                        is-link>
                <i slot="icon"
                   class="jiazheng icon-info"></i>
              </van-cell>
            </van-col>
          </van-row>
        </div>
      </div>
    </div>

    <!-- 身份认证弹出层 -->
    <van-popup v-model="authenticationShow"
               position="bottom">
      <van-row>
        <van-cell to="/authentication"> 家服人员授权认证 </van-cell>
      </van-row>
      <van-row class="row_two">
        <van-cell to="/administrator"> 家服公司管理人员认证 </van-cell>
      </van-row>
    </van-popup>
  </div>
</template>

<script>
export default {
  name: 'my',
  components: {},
  props: {},
  data () {
    return {
      // 身份认证弹出层
      authenticationShow: false,
      userLogin: {},
      pic: '',
    }
  },
  watch: {},
  created () {
    // 拿去登录信息
    this.getLogin()
  },
  mounted () { },
  methods: {
    // 切换登录
    HandoverLogin () {
      this.$dialog.confirm({
        title: '退出登录',
        message: '是否退出登录',
      })
        .then(() => {
          // on confirm
          this.$toast('退出成功')
          this.$router.push('/RapidEnrollment')
          window.localStorage.removeItem('userinfo')
          window.localStorage.removeItem('zhongqinghua')
        })
        .catch(() => {
          // on cancel
          this.$toast('取消退出')
        });
    },
    // 拿去登录信息
    async getLogin () {
      console.log(this.pic);
      if (window.localStorage.getItem('userinfo')) {
        const data2 = window.localStorage.getItem('userinfo')
        const arr2 = JSON.parse(data2)
        this.userLogin.nicheng = arr2.name
        this.pic = arr2.avatar
      } else {
        const data = window.localStorage.getItem('zhongqinghua')
        const arr = JSON.parse(data)
        this.userLogin = arr
      }
    }
    // authenticationShows () {
    //   console.log(this.authenticationShow);
    // }
  }
}
</script>

<style scoped lang="less">
.my {
  li {
    list-style: none;
  }
  // 底部
  .mint-tabbar {
    height: 134px;
    .layout-tabbar {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
      background-color: #fff;
      color: #7b7777;
      i.jiazheng {
        font-size: 45px;
      }
      span.text {
        font-size: 20px;
      }
    }
  }

  // 头部
  .header {
    height: 430px;
    background-color: #1196db;
    color: #fff;
    position: relative;
    .header_my {
      position: absolute;
      top: 35px;
      left: 35px;
      font-size: 30px;
      font-weight: 700;
    }
    .header_portrait {
      position: absolute;
      display: table-cell;
      text-align: center;
      vertical-align: middle;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      .header_portrait_img {
        width: 140px;
        height: 140px;
        background-color: #fff;
        border-radius: 50%;
        margin-bottom: 30px;
        .img {
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
      }
      .header_portrait_login {
        font-size: 26px;
        font-weight: 700;
      }
    }
  }
  // 中部
  .box {
    .box_muet {
      position: relative;
      .box_muet_ciadan {
        height: 160px;
        position: absolute;
        display: flex;
        top: -60px;
        left: 35px;
        right: 35px;
        background-color: #fff;
        vertical-align: center;
        .van-grid {
          width: 100%;
        }
        .box_muet_ciadan {
          width: 100%;
          height: 100%;
        }
        .van-grid-item {
          color: #7b7777;
          border: 0;
          /deep/ .van-grid-item__content {
            padding: 0;
          }
          .text {
            font-size: 24px;
            font-weight: 700;
          }
          .jiazheng {
            font-size: 50px;
            margin-bottom: 7px;
          }
        }
        // li:hover {
        //   background: rgba(0, 0, 0, 0.1);
        // }
      }
      .mint {
        position: absolute;
        top: 130px;
        left: 0;
        width: 100%;
        .van-col {
          width: 100%;
          .van-cell {
            height: 120px;
            display: flex;
            vertical-align: middle;
            line-height: 120px;
            padding: 0 30px;
            .van-icon {
              line-height: 120px;
            }
            span {
              font-size: 24px;
              font-weight: 700;
            }
          }
        }
        .jiazheng {
          font-size: 50px;
          color: #7b7777;
          margin-right: 10px;
        }
      }
    }
  }
  .van-popup {
    background: #eee;
    .van-cell__value {
      font-size: 24px;
      font-weight: 700;
      text-align: center;
    }
  }
  .row_two {
    margin-top: 10px;
  }
}
</style>
